<template>
    <svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size">
        <use :xlink:href="symbolId" :fill="color" />
    </svg>
</template>

<script setup>
const props = defineProps({
    prefix: {
        type: String,
        default: 'icon',
    },
    icon: {
        type: String,
        required: false,
        default: '',
    },
    color: {
        type: String,
        default: '',
    },
    size: {
        type: String,
        default: '100%',
    },
});

const symbolId = computed(() => `#${props.prefix}-${props.icon}`);
</script>